import React,{Component} from 'react'
import { Scroller,Touchable,List } from '$yo-component'
//import yoHistory from '$common/history';
import scrollIntoView from 'scroll-into-view-if-needed'
import axios from 'axios'

import './index.scss'

let guid=0;
class NavBar extends Component {
    constructor(props){
        super(props);
        this.state={
            dataSource: [
                {navName:'全部', key:++guid },
                {navName:'景点', key:++guid },
                {navName:'美食', key:++guid },
                {navName:'酒店', key:++guid },
                {navName:'购物', key:++guid },
                {navName:'玩乐', key:++guid },
                {navName:'周末游', key:++guid}
            ],
            newData: [],
            count: 0
        };
    }
    handleClick(ev,index){
        this.setState({
            count: index
        });

        let page=1;
        //console.log(page)

        let viewName=ev.target.innerHTML;
        if(viewName==='全部'){
            viewName='';
        }

        axios.get('http://127.0.0.1/api/book/search?page='+page+'&limit=10&bookType=3&imageSize=big&label='+viewName+'&destId=300679&q=&destType=1').then((response)=>{
            let res=response.data
            if(res.ret){
                let newData=res.data.list
                let length=newData.length;
                for(var i=0;i<length;i++){
                    newData[i].key = newData[i].id
                }
                this.setState(()=>{
                    return {
                        newData: newData
                    }
                },()=>{
                    console.log(this.state.newData)
                    // 在这里调用父组件中的方法去修改父组件中的数据
                    this.props.modifyData(this.state.newData)
                    // 导航条每次点击后page从1开始
                    //this.props.modifyPage(page)
                })
            }
        });

        //判断是loadMore还是导航
        let flag=true;
        this.props.handleFlag(flag)
        //修改label的值
        this.props.modifyLabel(viewName)
        this.props.modifyPage(page)
    }

    render (){
        return (

            <Scroller
                scrollX={true}
                scrollY={false}
            >
             <ul className={'home-nav'}>
                 {
                     this.state.dataSource.map((item, index)=>{
                         let i=index
                         return (
                            <li key={index}>
                                <a className={this.state.count===index?'yo-btn btn-active': 'yo-btn'} href="javascript:;" onClick={(ev,i)=>{this.handleClick(ev,index)}}>{item.navName}</a>
                            </li>
                         )
                     })
                 }
             </ul>
            </Scroller>
        )
    }
}

export default NavBar;